<template>
	<view :class="{'chart_portrait': !isLandScape, 'chart_lanscape': isLandScape}">
		<view class="bigBox">
			<table class="tbcls">
				<tr>
					<th>序号</th>
					<th>工单号</th>
					<th>下单时间</th>
					<th>序号</th>
					<th>工单号</th>
					<th>下单时间</th>
				</tr>
				<tr>
					<td>1</td>
					<td>123456</td>
					<td>2021/4/9</td>
					<td>1</td>
					<td>123456</td>
					<td>2021/4/9</td>
				</tr>
				<tr>
					<td>1</td>
					<td>123456</td>
					<td>2021/4/9</td>
					<td>1</td>
					<td>123456</td>
					<td>2021/4/9</td>
				</tr>
				<tr>
					<td>1</td>
					<td>123456</td>
					<td>2021/4/9</td>
					<td>1</td>
					<td>123456</td>
					<td>2021/4/9</td>
				</tr>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('default');
			// #endif
		},
		onUnload() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},
		data() {
			return {
				isLandScape: false // 是否横屏，默认为竖屏
			}
		},
		methods: {

		},
		// 监听尺寸变化
		onResize() {
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					if (res.windowWidth > res.windowHeight) {
						// 横屏
						_this.isLandScape = true
					} else {
						// 竖屏
						_this.isLandScape = false
					}
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	// 竖屏
	.chart_portrait {
		height: 36vh;
		font-size: 2vh;
		text-align: center;

		.tbcls {
			width: 97vw;
		}
	}

	// 横屏
	.chart_lanscape {
		height: 82vh;
		font-size: 2vw;
		text-align: center;

		.tbcls {
			width: 98vw;
		}

	}

	.bigBox {
		margin: .5em;
	}

	table,
	th,
	tr,
	td {
		border: 1px solid #ccc;
		margin: auto;
		border-spacing: 0;
	}
</style>
